<template>
    <j-modal title="邀请问诊" :width="1000" :destroyOnClose="true" :visible="visible" switchFullscreen
        :okButtonProps="{ style: { 'display': 'none' } }" @cancel="handleCancel" cancelText="关闭">
        <a-card style="width: 100%;display: flex;justify-content: center;" :bordered="false">
            <j-form-container style="width: 400px;">
                <a-form-model ref="ruleForm" :model="model" :rules="validatorRules" slot="detail">
                    <a-row>
                        <a-col :span="24">
                            <a-form-model-item label="关联预约单" prop="reserveId" :labelCol="labelCol"
                                :wrapperCol="wrapperCol">
                                <a-select v-model="model.reserveId" placeholder="请选择关联预约单"
                                    :disabled="record.wzReserve.id ? true : false">
                                    <a-select-option :value="i.id" v-for="(i, o) in reserveList" :key="o">
                                        预约时间: {{ i.yyDate }} {{ i.yyTime }} / 患者:{{ i.patientId_dictText }} / 科室:{{
                                            i.dept_dictText
                                        }} / 医生:{{ i.doctorId_dictText }}/ 预约状态:{{ i.status_dictText }}
                                    </a-select-option>
                                </a-select>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="24">
                            <a-form-model-item label="机构" required :labelCol="labelCol" :wrapperCol="wrapperCol"
                                prop="orgId">
                                <a-select v-model="model.orgId" placeholder="请选择机构" @change="changeOrg" show-search
                                    option-filter-prop="children" :filter-option="filterOption">
                                    <a-select-option :value="i.id" v-for="(i, o) in hospList" :key="o">{{ i.name
                                    }}</a-select-option>
                                </a-select>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="24">
                            <a-form-model-item v-if="model.orgId" required label="科室" :labelCol="labelCol"
                                :wrapperCol="wrapperCol" prop="dept">
                                <a-select v-model="model.dept" placeholder="请选择科室" @change="changeDept">
                                    <a-select-option :value="i.id" v-for="(i, o) in deptList" :key="o">{{
                                        i.deptName
                                    }}</a-select-option>
                                </a-select>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="24">
                            <a-form-model-item v-if="model.dept" required label="预约日期" :labelCol="labelCol"
                                :wrapperCol="wrapperCol" prop="yyDate">
                                <j-date placeholder="请选择预约日期" @change="changeDate" v-model="model.yyDate"
                                    style="width: 100%" />
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="24">
                            <a-form-model-item v-if="model.dept" required label="医生" :labelCol="labelCol"
                                :wrapperCol="wrapperCol" prop="doctorId">
                                <a-select v-model="model.doctorId" placeholder="请选择医生" @change="changeDoct">
                                    <a-select-option :value="i.id" v-for="(i, o) in docList" :key="o">{{ i.name
                                    }} {{ i.cert }}</a-select-option>
                                </a-select>
                            </a-form-model-item>
                        </a-col>
                        <!-- <a-col :span="24">
                            <a-form-model-item label="邀请链接" prop="users">
                                <div class="urlv">
                                    <div class="urlvi">{{ mainUrl }}</div>
                                    <a-button class="urlvib" size="small" type="primary" :data-clipboard-text="mainUrl">
                                        点击复制
                                    </a-button>
                                </div>
                            </a-form-model-item>
                        </a-col> -->
                    </a-row>
                </a-form-model>
            </j-form-container>
            <div class="yyV" v-if="timeList.length">
                <div class="yyVi" v-for="(i, o) in timeList" :key="o">
                    <div class="yyVit"> {{ i.yyInterval }}</div>
                    <div class="yyVib">
                        <a-popconfirm :title="`确认预约 ${i.yyInterval} 时段？`" ok-text="确认" cancel-text="取消"
                            @confirm="handleOk(i)">
                            <a-tag :color="i.status == 0 ? '#03a386' : '#bbb'" size="mini">{{ i.status == 0
                                ? '预约' : i.status == 1 ? '已满' : '过期' }}</a-tag>
                        </a-popconfirm>

                    </div>
                </div>
            </div>
        </a-card>

    </j-modal>
</template>

<script>
import clipboard from 'clipboard'
import { httpAction, getAction } from '@/api/manage'
import { postAction } from '../../../../api/manage'
import moment from 'moment'
export default {
    data() {
        return {
            moment,
            visible: false,
            reserveList: [],
            model: {
                doctorIds: [],
                reserveId: null,
            },
            labelCol: {
                xs: { span: 24 },
                sm: { span: 5 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 },
            },
            usersList: [],
            record: {},
            mainUrl: '',
            validatorRules: {
                doctorIds: [{ required: true, message: '请选择参诊人员!' }],
                reserveId: [{ required: true, message: '请选择关联预约单!' }]
            },
            hospList: [],
            deptList: [],
            docList: [],
            timeList: [],
        }
    },
    mounted() {
        getAction('/wz/hosp/wzHospital/listAll', { pageNo: 1, pageSize: 999 }).then(res => {
            this.hospList = res.result.records;
        })
    },
    methods: {
        show(record) {
            this.visible = true;
            this.record = JSON.parse(JSON.stringify(record));

            // this.mainUrl = `${record.shareUrl} 电脑端点击链接 / 手机端请复制链接至浏览器加入由 ${record.wzReserve.orgId_dictText} ${record.wzReserve.dept_dictText} ${record.wzReserve.created} 发起的 ${record.wzReserve.startDate} ${record.name} 问诊吧！`
            new clipboard('.urlvib')
            if (record.wzReserve.id) {
                this.model.reserveId = record.wzReserve.id
            }
            getAction('/wz/reserve/wzReserve/list', { pageNo: 1, pageSize: 999 }).then(res => {
                this.reserveList = res.result.records;
            })
            getAction('/wz/doctor/wzDoctorInfo/queryByOrgId', { orgId: record.orgId }).then(res => {
                this.usersList = res.result
                if (record.wzOnlineInquiryUser) {
                    this.model.doctorIds = record.wzOnlineInquiryUser.map(i => i.doctorId)
                }
                console.log(this.model.doctorIds)
            })
        },
        handleCancel() {
            this.visible = false
        },
        changeDoct() {
            getAction('/wz/schedule/wzSchedule/getTimeListByDoctor', {
                doctorId: this.model.doctorId,
                date: this.model.yyDate
            }).then(res => {
                this.timeList = this.getMainlist(res.result);
            })
        },
        filterOption(input, option) {
            return (
                option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
            );
        },
        getMainlist(row) {
            if (this.model.yyDate != this.moment().format('YYYY-MM-DD')) return row;
            row.map(i => {
                if (this.moment(this.model.yyDate + ' ' + i.yyInterval.split('-')[0]) < this.moment()) {
                    i.status = 9
                }
            })
            return row;
        },
        changeOrg() {
            if (this.model.yyDate) this.model.yyDate = null
            if (this.model.doctorId) this.model.doctorId = null
            if (this.model.dept) this.model.dept = null
            getAction('/wz/hosp/wzHospDept/queryByOrgId', { pageNo: 1, pageSize: 999, orgId: this.model.orgId }).then(res => {
                this.deptList = res.result;
            })
        },
        changeDept() {
            if (this.model.yyDate) this.model.yyDate = null
            if (this.model.doctorId) this.model.doctorId = null
        },
        changeDate() {
            if (!this.model.yyDate) return;
            getAction('/wz/doctor/wzDoctorInfo/queryByDeptIdAndDate', { pageNo: 1, pageSize: 999, date: this.model.yyDate, deptId: this.model.dept }).then(res => {
                this.docList = res.result;
            })
        },
        handleOk(item) {
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    postAction('/wz/reserve/wzReserve/addInvitation', {
                        scheduleId: item.id,
                        doctorId: this.model.doctorId,
                        yyDate: this.model.yyDate,
                        yyInterval: item.yyInterval,
                        yyTime: item.yyTime,
                        dept: this.model.dept,
                        orgId: this.model.orgId,
                        reserveId: this.model.reserveId
                    }).then(res => {
                        if (res.success) {
                            this.visible = false
                            this.$message.success(res.message)
                            this.$emit('rload')
                        } else {
                            this.$message.error(res.message)
                        }
                    })
                }
            })
        },
        filterOption(input, option) {
            return (
                option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
            );
        },
    }
}
</script>

<style lang="less" scoped>
.urlv {
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 4px;
    background-color: #f9f9f9;
}

.yyV {
    width: 400px;
    overflow-y: auto;
    max-height: 600px;

    .yyVi {
        width: 100%;
        justify-content: space-around;
        display: flex;
        align-items: center;
        margin: 5px 0;
        padding: 5px 0;
        font-size: 18px;
        border-bottom: 1px dashed #ccc;
    }

    .yyVib {
        /deep/span {
            cursor: pointer;
            font-size: 15px;
        }
    }
}


/deep/.ant-card-body {
    display: flex;
    justify-content: center;
    position: relative;
}
</style>